<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像放大镜效果</title>
    <style>
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 50px auto;
            padding: 20px;
            text-align: center;
        }

        .image-container {
            position: relative;
            display: inline-block;
            cursor: none;
        }

        .main-image {
            max-width: 100%;
            height: auto;
            display: block;
        }

        .magnifier {
            position: absolute;
            width: 150px;
            height: 150px;
            border: 3px solid #fff;
            border-radius: 50%;
            pointer-events: none;
            display: none;
            box-shadow: 0 0 0 1px #000;
            background-repeat: no-repeat;
        }

        .info {
            margin-top: 20px;
            color: #666;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>图像放大镜效果</h1>
        <div class="image-container" id="imageContainer">
            <img src="https://picsum.photos/seed/zoom/800/600.jpg" alt="示例图片" class="main-image" id="mainImage">
            <div class="magnifier" id="magnifier"></div>
        </div>
        <p class="info">将鼠标移动到图片上查看放大效果</p>
    </div>

    <script>
        const imageContainer = document.getElementById('imageContainer');
        const mainImage = document.getElementById('mainImage');
        const magnifier = document.getElementById('magnifier');

        // 设置放大倍数
        const ZOOM_LEVEL = 3;

        // 初始化放大镜
        function initMagnifier() {
            const imageRect = mainImage.getBoundingClientRect();
            
            // 设置放大镜背景图片
            magnifier.style.backgroundImage = `url(${mainImage.src})`;
            magnifier.style.backgroundSize = `${imageRect.width * ZOOM_LEVEL}px ${imageRect.height * ZOOM_LEVEL}px`;
        }

        // 处理鼠标移动事件
        imageContainer.addEventListener('mousemove', (e) => {
            const imageRect = mainImage.getBoundingClientRect();
            const magnifierSize = magnifier.offsetWidth;
            
            // 计算鼠标相对于图片的位置
            let mouseX = e.clientX - imageRect.left;
            let mouseY = e.clientY - imageRect.top;
            
            // 限制放大镜在图片范围内
            mouseX = Math.max(magnifierSize/2, Math.min(imageRect.width - magnifierSize/2, mouseX));
            mouseY = Math.max(magnifierSize/2, Math.min(imageRect.height - magnifierSize/2, mouseY));
            
            // 设置放大镜位置
            magnifier.style.left = `${mouseX - magnifierSize/2}px`;
            magnifier.style.top = `${mouseY - magnifierSize/2}px`;
            
            // 计算背景位置
            const bgX = -((mouseX / imageRect.width) * imageRect.width * ZOOM_LEVEL - magnifierSize/2);
            const bgY = -((mouseY / imageRect.height) * imageRect.height * ZOOM_LEVEL - magnifierSize/2);
            
            magnifier.style.backgroundPosition = `${bgX}px ${bgY}px`;
        });

        // 显示放大镜
        imageContainer.addEventListener('mouseenter', () => {
            magnifier.style.display = 'block';
            initMagnifier();
        });

        // 隐藏放大镜
        imageContainer.addEventListener('mouseleave', () => {
            magnifier.style.display = 'none';
        });

        // 图片加载完成后初始化
        mainImage.addEventListener('load', initMagnifier);
        window.addEventListener('resize', initMagnifier);
    </script>
</body>
</html>